<template>
  <div>
    <!-- 顶部 -->
    <div class="m-top">
      <van-nav-bar
        title="我的余额"
        right-text="明细"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="m-num">
        <span>余额账户（元）</span>
        <h2>56.00</h2>
      </div>
    </div>

    <div class="m-btn">
      <!-- 充值按钮 -->
      <button>立即充值</button>
      <!-- 说明 -->
      <div class="explain">
        <p style="font-size: 16px"><span>充值说明：</span></p>
        <p style="font-size: 14px">
          <span style="color: #999999"
            >1.充值金额用于平台购买课程消费，不可提现，不可转让。</span
          >
        </p>
        <p style="font-size: 14px">
          <span style="color: #999999">2.如充值遇到问题请联系客服。</span>
        </p>
        <p style="font-size: 14px">
          <span style="color: #999999">3.充值方式可选择支付宝或微信。</span>
        </p>
        <p style="font-size: 14px">
          <span style="color: #999999">......</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>
<style lang='scss'>
.m-top {
  border-width: 0px;
  width: 375px;
  height: 192px;
  background-color: rgba(102, 110, 232, 1);
  .van-nav-bar {
    height: 54px;
    line-height: 54px;
    background-color: rgba(102, 110, 232, 1);
    .van-nav-bar__title,
    .van-icon,
    .van-nav-bar__text {
      color: white;
    }
  }
  .m-num {
    color: white;
    margin-left: 20px;
    margin-top: 10px;
    span {
      font-size: 13px;
    }
    h2 {
      margin: 10px 0;
    }
  }
}
.m-btn {
  width: 335px;
  margin: 0 auto;
  button {
    margin: 30px 0;
    width: 334px;
    height: 44px;
    border-radius: 50px;
    border: none;
    color: white;
    font-size: 15px;
    background-color: rgba(102, 110, 232, 1);
  }
}
</style>